<template>
  <div>
    <!-- 支付成功 -->
    <div class="store_img">
      <img src="/static/images/store/paySuccess.png" alt />
      <div class="paySuccess">订单支付成功</div>
      <p>您可以在我的订单中查询单详情</p>
    </div>

    <!-- 按钮 -->
    <div class="footer">
      <button class="btn" @click="orderDetails($root.$mp.query.id)">查看订单</button>
      <button
        class="btn"
        style="background-color: #fff;color: #187798;margin-top:15px;"
        @click="handleDetails"
      >返回商城</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data () {
    return {};
  },
  computed: {},
  created () {},
  mounted () {
    console.log(this.$root.$mp.query.id, '来到订单支付成功');
  },
  watch: {},
  methods: {
    orderDetails (id) {
      console.log(id, '订单支付成功');
      wx.navigateTo({
        url: `/pages/PersonalCenter/userChildren/myOrder/orderDetail/main?id=${id}`
      });
    },
    handleDetails () {
      wx.switchTab({ url: '/pages/store/store/main' });
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
.store_img {
  text-align: center;

  img {
    height: 116px;
    width: 116px;
    margin: 45px auto 25px;
  }

  p {
    font-size: 14px;
    font-weight: 400;
    color: rgba(144, 146, 146, 1);
    height: 42px;
  }
}

.paySuccess {
  font-size: 17px;
  font-weight: 700;
  color: rgba(24, 119, 152, 1);
  height: 32px;
}

.footer {
  width: 100%;
  padding: 6px 25px;
  box-sizing: border-box;
  // background-color: skyblue;

  .btn {
    background-color: #187798;
    color: rgba(255, 255, 255, 1);
    font-weight: 700;
    font-size: 15px;
    height: 100%;
  }
}

.btn_foot {
}
</style>
